import React from "react";
import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Trash2, Plus } from "lucide-react";

const QualityIssueItem = ({
  issue,
  issueIndex,
  onUpdateIssue,
  onUpdateMeasures,
  onAddMeasure,
  onRemoveMeasure,
  onRemoveIssue,
}) => {
  return (
    <Card key={issue.id} className="border-l-4 border-l-orange-400">
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between">
          <div className="flex-1 space-y-3">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div>
                <Label className="text-sm font-medium">质量通病名称</Label>
                <Input
                  value={issue.issueName}
                  onChange={(e) =>
                    onUpdateIssue(issueIndex, "issueName", e.target.value)
                  }
                  placeholder="输入质量通病名称..."
                />
              </div>
              <div>
                <Label className="text-sm font-medium">分类</Label>
                <Input
                  value={issue.category || ""}
                  onChange={(e) =>
                    onUpdateIssue(issueIndex, "category", e.target.value)
                  }
                  placeholder="如：基础施工、杆塔组立..."
                />
              </div>
            </div>
          </div>
          <Button
            variant="ghost"
            size="icon"
            onClick={() => onRemoveIssue(issueIndex)}
            className="text-red-500 hover:text-red-700 hover:bg-red-50 ml-2"
          >
            <Trash2 className="w-4 h-4" />
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <div className="flex items-center justify-between mb-3">
            <Label className="text-sm font-medium">防治措施</Label>
            <Button
              onClick={() => onAddMeasure(issueIndex)}
              variant="outline"
              size="sm"
            >
              <Plus className="w-3 h-3 mr-1" />
              添加措施
            </Button>
          </div>
          <div className="space-y-2">
            {issue.preventionMeasures.map((measure, measureIndex) => (
              <div
                key={`${issue.id}-measure-${measureIndex}`}
                className="flex gap-2"
              >
                <Textarea
                  value={measure}
                  onChange={(e) =>
                    onUpdateMeasures(issueIndex, measureIndex, e.target.value)
                  }
                  placeholder="输入防治措施..."
                  rows={2}
                />
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => onRemoveMeasure(issueIndex, measureIndex)}
                  className="text-red-500 hover:text-red-700 hover:bg-red-50"
                >
                  <Trash2 className="w-4 h-4" />
                </Button>
              </div>
            ))}
          </div>
        </div>
        {/* 此处可补充responsibleRoles相关UI（原代码未完成部分） */}
      </CardContent>
    </Card>
  );
};

export default QualityIssueItem;